<template>
  <div class="withdraw-manager">
    <!-- 操作区 -->
    <!-- PC端布局 -->
    <div class="withdraw-section desktop-layout">
      <div class="withdraw-header">
        <h3 class="section-title">
          <i class="iconfont icon-tixian"></i>
          提现管理
        </h3>
      </div>
      
      <div class="withdraw-content">
        <a-row :gutter="24" align="middle">
          <!-- 余额卡片 -->
          <a-col :span="6">
            <div class="balance-card">
              <div class="balance-icon">
                <img src="@/assets/images/yue.png" alt="">
              </div>
              <div class="balance-info">
                <div class="balance-label">当前余额</div>
                <div class="balance-value">{{ userStore.userInfo?.balance || 0 }}</div>
              </div>
            </div>
          </a-col>
          
          <!-- 提现操作 -->
          <a-col :span="8">
            <div class="withdraw-form">
              <div class="form-item">
                <label class="form-label">提现方式</label>
                <a-radio-group v-model:value="withdrawMethod" size="large" style="width: 100%">
                  <a-radio value="alipay">支付宝</a-radio>
                  <a-radio value="wechat">微信</a-radio>
                </a-radio-group>
              </div>
              
              <!-- 支付宝账号输入 -->
              <div class="form-item" v-if="withdrawMethod === 'alipay'">
                <label class="form-label">支付宝账号</label>
                <a-input
                  v-model:value="alipayAccount"
                  placeholder="请输入支付宝账号（手机号或邮箱）"
                  size="large"
                />
              </div>
              
              <!-- 微信收款码上传 -->
              <div class="form-item" v-if="withdrawMethod === 'wechat'">
                <label class="form-label">微信收款码</label>
                <a-upload
                  v-model:file-list="qrFileList"
                  :before-upload="beforeUploadQR"
                  :custom-request="uploadQRCode"
                  list-type="picture-card"
                  :max-count="1"
                  accept="image/*"
                >
                  <div v-if="qrFileList.length < 1">
                    <PlusOutlined />
                    <div style="margin-top: 8px">上传收款码</div>
                  </div>
                </a-upload>
              </div>
              
              <div class="form-item">
                <label class="form-label">提现金额</label>
                <a-input-number
                  v-model:value="withdrawAmount"
                  :min="min_withdraw_amount"
                  :max="max_withdraw_amount"
                  :precision="2"
                  placeholder="请输入提现金额"
                  size="large"
                  style="width: 100%"
                />
              </div>
              <div class="form-actions">
                <a-button 
                  type="primary" 
                  size="large"
                  :loading="withdrawing" 
                  @click="handleWithdraw"
                  :disabled="!canSubmit"
                >
                  <i class="iconfont icon-tixian"></i>
                  确认提现
                </a-button>
                <a-button 
                  size="large"
                  @click="fetchWithdraws" 
                  :loading="withdrawLoading"
                >
                  <i class="iconfont icon-shuaxin"></i>
                  刷新记录
                </a-button>
              </div>
            </div>
          </a-col>
          
          <!-- 提示信息 -->
          <a-col :span="10">
            <div class="withdraw-tips">
              <div class="tips-header">
                <i class="iconfont icon-tishi"></i>
                <span>提现说明</span>
              </div>
              <div class="tips-content">
                <div class="tip-item">
                  <span class="tip-label">到账时间：</span>
                  <span class="tip-text">两小时内</span>
                </div>
                <div class="tip-item">
                  <span class="tip-label">手续费：</span>
                  <span class="tip-text">{{ withdraw_fee_rate * 100 }}% (最低2元)</span>
                </div>
                <div class="tip-item">
                  <span class="tip-label">提现范围：</span>
                  <span class="tip-text">¥{{ min_withdraw_amount }} - ¥{{ max_withdraw_amount }}</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 移动端布局 -->
    <div class="withdraw-section mobile-layout">
      <!-- 移动端头部 -->
      <div class="mobile-header">
        <h3 class="mobile-title">
          <i class="iconfont icon-tixian"></i>
          提现管理
        </h3>
      </div>

      <!-- 余额展示卡片 -->
      <div class="mobile-balance-card">
        <div class="balance-header">
          <div class="balance-icon">
            <img src="@/assets/images/yue.png" alt="">
          </div>
          <div class="balance-text">
            <div class="balance-label">当前可用余额</div>
            <div class="balance-amount">¥{{ userStore.userInfo?.balance || 0 }}</div>
          </div>
        </div>
      </div>

      <!-- 提现表单卡片 -->
      <div class="mobile-form-card">
        <div class="form-header">
          <h4>提现申请</h4>
        </div>
        <div class="form-body">
          <div class="input-group">
            <label class="input-label">提现方式</label>
            <a-radio-group v-model:value="withdrawMethod" class="mobile-radio-group">
              <a-radio value="alipay">支付宝</a-radio>
              <a-radio value="wechat">微信</a-radio>
            </a-radio-group>
          </div>
          
          <!-- 支付宝账号输入 -->
          <div class="input-group" v-if="withdrawMethod === 'alipay'">
            <label class="input-label">支付宝账号</label>
            <a-input
              v-model:value="alipayAccount"
              placeholder="请输入支付宝账号"
              class="mobile-input"
            />
          </div>
          
          <!-- 微信收款码上传 -->
          <div class="input-group" v-if="withdrawMethod === 'wechat'">
            <label class="input-label">微信收款码</label>
            <a-upload
              v-model:file-list="qrFileList"
              :before-upload="beforeUploadQR"
              :custom-request="uploadQRCode"
              list-type="picture-card"
              :max-count="1"
              accept="image/*"
              class="mobile-upload"
            >
              <div v-if="qrFileList.length < 1">
                <PlusOutlined />
                <div style="margin-top: 4px; font-size: 12px;">上传收款码</div>
              </div>
            </a-upload>
          </div>
          
          <div class="input-group">
            <label class="input-label">提现金额</label>
            <a-input-number
              v-model:value="withdrawAmount"
              :min="min_withdraw_amount"
              :max="max_withdraw_amount"
              :precision="2"
              placeholder="请输入提现金额"
              class="mobile-input"
            />
          </div>
          
          <div class="mobile-buttons">
            <a-button 
              type="primary" 
              block
              :loading="withdrawing" 
              @click="handleWithdraw"
              :disabled="!canSubmit"
              class="primary-btn"
            >
              <i class="iconfont icon-tixian"></i>
              立即提现
            </a-button>
            <a-button 
              block
              @click="fetchWithdraws" 
              :loading="withdrawLoading"
              class="secondary-btn"
            >
              <i class="iconfont icon-shuaxin"></i>
              刷新记录
            </a-button>
          </div>
        </div>
      </div>

      <!-- 提现说明卡片 -->
      <div class="mobile-tips-card">
        <div class="tips-header">
          <i class="iconfont icon-tishi"></i>
          <span>提现说明</span>
        </div>
        <div class="tips-list">
          <div class="tip-row">
            <div class="tip-icon">⏰</div>
            <div class="tip-content">
              <div class="tip-title">到账时间</div>
              <div class="tip-desc">两小时内到账</div>
            </div>
          </div>
          <div class="tip-row">
            <div class="tip-icon">💰</div>
            <div class="tip-content">
              <div class="tip-title">手续费用</div>
              <div class="tip-desc">{{ withdraw_fee_rate * 100 }}% (最低2元)</div>
            </div>
          </div>
          <div class="tip-row">
            <div class="tip-icon">📊</div>
            <div class="tip-content">
              <div class="tip-title">提现范围</div>
              <div class="tip-desc">¥{{ min_withdraw_amount }} - ¥{{ max_withdraw_amount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 提现记录 -->
    <div class="records-section">
      <div class="records-header">
        <h3 class="section-title">
          <i class="iconfont icon-jilu"></i>
          提现记录
        </h3>
      </div>
      
      <div class="records-content">
        <!-- PC端表格 -->
        <a-table
          :columns="columns"
          :data-source="withdraws"
          :loading="withdrawLoading"
          row-key="_id"
          :pagination="false"
          size="middle"
          class="withdraw-table desktop-table"
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'createdAt'">
            <span>{{ record.createdAt }}</span>
          </template>

          <template v-else-if="column.key === 'amount'">
            <span class="amount expense">-{{ Math.abs(record.amount || 0) }}</span>
          </template>

          <template v-else-if="column.key === 'auditStatus'">
            <a-tag :color="getAuditStatusColor(record.auditStatus)">{{ getAuditStatusText(record.auditStatus) }}</a-tag>
          </template>

          <template v-else-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">{{ getStatusText(record.status) }}</a-tag>
          </template>

          <template v-else-if="column.key === 'description'">
            <span class="desc">{{ record.description || '-' }}</span>
          </template>
        </template>

        <template #emptyText>
          <a-empty description="暂无提现记录" />
        </template>
      </a-table>
      
      <!-- 移动端卡片布局 -->
      <div class="mobile-withdraw-cards">
        <div 
          v-for="record in withdraws" 
          :key="record._id" 
          class="withdraw-card"
        >
          <div class="withdraw-card-header">
            <div class="withdraw-time">
              {{ record.createdAt }}
            </div>
            <div class="withdraw-amount">
              <span class="amount expense">-{{ Math.abs(record.amount || 0) }}</span>
            </div>
          </div>
          
          <div class="withdraw-card-content">
            <div class="status-row">
              <div class="status-item">
                <span class="status-label">审核状态</span>
                <a-tag :color="getAuditStatusColor(record.auditStatus)">
                  {{ getAuditStatusText(record.auditStatus) }}
                </a-tag>
              </div>
              <div class="status-item">
                <span class="status-label">状态</span>
                <a-tag :color="getStatusColor(record.status)">
                  {{ getStatusText(record.status) }}
                </a-tag>
              </div>
            </div>
            
            <div v-if="record.description && record.description !== '-'" class="description-row">
              <span class="desc-label">说明</span>
              <span class="desc-text">{{ record.description }}</span>
            </div>
          </div>
        </div>
        
        <div v-if="withdraws.length === 0 && !withdrawLoading" class="mobile-empty">
          <a-empty description="暂无提现记录" />
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import userAPI from '~/api/user'
import systemAPI from '~/api/system'
import transactionAPI from '~/api/transaction'
import uploadAPI from '~/api/upload'

const userStore = useUserStore()

// 基础数据
const withdrawAmount = ref(null)
const withdrawing = ref(false)
const withdraws = ref([])
const withdrawLoading = ref(false)
const withdrawConfigs = ref({})
const max_withdraw_amount = ref(0)
const min_withdraw_amount = ref(0)
const withdraw_fee_rate = ref(0)

// 提现方式相关
const withdrawMethod = ref('alipay')
const alipayAccount = ref('')
const qrFileList = ref([])
const qrCodeUrl = ref('')

// 验证是否可以提交
const canSubmit = computed(() => {
  // 基本金额校验
  if (!withdrawAmount.value || withdrawAmount.value < min_withdraw_amount.value || withdrawAmount.value > max_withdraw_amount.value) {
    return false
  }
  
  // 余额校验
  if ((userStore.userInfo?.balance || 0) < withdrawAmount.value) {
    return false
  }
  
  // 提现方式校验
  if (withdrawMethod.value === 'alipay') {
    return !!alipayAccount.value && alipayAccount.value.trim() !== ''
  } else if (withdrawMethod.value === 'wechat') {
    return qrFileList.value.length > 0 && !!qrCodeUrl.value
  }
  
  return false
})

const columns = [
  { title: '时间', dataIndex: 'createdAt', key: 'createdAt', width: 180 },
  { title: '金额', dataIndex: 'amount', key: 'amount', width: 120 },
  { title: '审核状态', dataIndex: 'auditStatus', key: 'auditStatus', width: 100 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
  { title: '说明', dataIndex: 'description', key: 'description',ellipsis: true }
]

// 上传相关函数
const beforeUploadQR = (file) => {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    message.error('只能上传图片文件！')
    return false
  }
  
  const isLt5M = file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    message.error('图片大小不能超过5MB！')
    return false
  }
  
  return true
}

const uploadQRCode = async ({ file, onSuccess, onError }) => {
  try {
    const { urls } = await uploadAPI.uploadScreenshots(file)
    if (urls && urls.length > 0) {
      qrCodeUrl.value = urls[0]
      onSuccess()
    } else {
      onError()
      message.error('上传失败')
    }
  } catch (error) {
    onError()
    message.error('上传失败，请重试')
  }
}

const getStatusColor = (status) => {
  const colorMap = {
    'pending': 'orange',
    'success': 'green',
    'failed': 'red',
    'cancelled': 'default',
    'audit_pending': 'blue',
    'audit_approved': 'green',
    'audit_rejected': 'red'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status) => {
  const textMap = {
    'pending': '处理中',
    'success': '成功',
    'failed': '失败',
    'cancelled': '已取消',
    'audit_pending': '待审核',
    'audit_approved': '审核通过',
    'audit_rejected': '审核拒绝'
  }
  return textMap[status] || status
}

const getAuditStatusColor = (auditStatus) => {
  const colorMap = {
    'none': 'default',
    'pending': 'processing',
    'approved': 'success', 
    'rejected': 'error'
  }
  return colorMap[auditStatus] || 'default'
}

const getAuditStatusText = (auditStatus) => {
  const textMap = {
    'none': '-',
    'pending': '待审核',
    'approved': '已通过',
    'rejected': '已拒绝'
  }
  return textMap[auditStatus] || '-'
}

const fetchWithdraws = async () => {
  try {
    withdrawLoading.value = true
    const res = await transactionAPI.getUserTransactions({ page: 1, limit: 20, type: 'withdraw' })
    const data = res.data || res
    withdraws.value = data.data?.list || data.list || []
  } catch (e) {
    console.error('获取提现记录失败:', e)
    message.error('获取提现记录失败')
  } finally {
    withdrawLoading.value = false
  }
}

const fetchSystemConfig = async () => {
  const res = await systemAPI.getConfigs({ category: 'withdraw' })
  console.log(res)
  if (res.code === 200) {
    withdrawConfigs.value = res.data.configs.withdraw
    // 这是一个数组，遍历一下
    withdrawConfigs.value.forEach(item => {
      if (item.key === 'max_withdraw_amount') {
        max_withdraw_amount.value = item.value
      }
      if (item.key === 'min_withdraw_amount') {
        min_withdraw_amount.value = item.value
      }
      if (item.key === 'withdraw_fee_rate') {
        withdraw_fee_rate.value = item.value
      }
    })
  }
}

const handleWithdraw = async () => {
  const amount = Number(withdrawAmount.value)
  
  // 验证提交条件
  if (!canSubmit.value) {
    if (!amount || amount <= 0) {
      message.error('请输入正确的提现金额')
    } else if ((userStore.userInfo?.balance || 0) < amount) {
      message.error('余额不足')
    } else if (withdrawMethod.value === 'alipay' && !alipayAccount.value.trim()) {
      message.error('请输入支付宝账号')
    } else if (withdrawMethod.value === 'wechat' && (!qrFileList.value.length || !qrCodeUrl.value)) {
      message.error('请上传微信收款码')
    }
    return
  }
  
  try {
    withdrawing.value = true
    
    // 构建提现请求数据
    const withdrawData = {
      amount,
      method: withdrawMethod.value,
      methodInfo: withdrawMethod.value === 'alipay' 
        ? { account: alipayAccount.value.trim() }
        : { qrCodeUrl: qrCodeUrl.value }
    }
    
    const res = await userAPI.withdraw(withdrawData)
    const ok = res.status === 'success' || res.code === 200
    if (ok) {
      message.success('提现申请已提交，请等待管理员审核')
      
      // 重置表单
      withdrawAmount.value = null
      alipayAccount.value = ''
      qrFileList.value = []
      qrCodeUrl.value = ''
      
      await userStore.getUserInfo()
      await fetchWithdraws()
    } else {
      message.error(res.message || '提现申请失败')
    }
  } catch (e) {
    console.error('提现失败:', e)
    message.error(e?.response?.data?.message || '提现失败')
  } finally {
    withdrawing.value = false
  }
}

onMounted(() => {
  fetchWithdraws()
  fetchSystemConfig()
})
</script>

<style scoped lang="scss">
.withdraw-manager {
  .withdraw-section {
    background: white;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    
    .withdraw-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 20px 24px;
      
      .section-title {
        color: white;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        
        i {
          font-size: 20px;
        }
      }
    }
    
    .withdraw-content {
      padding: 24px;
      
      .balance-card {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        border-radius: 12px;
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        box-shadow: 0 4px 12px rgba(252, 182, 159, 0.3);
        
        .balance-icon {
          width: 48px;
          height: 48px;
          // background: rgba(255, 255, 255, 0.2);
          // border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 42px;
            height: auto;
            // height: 42px;
          }
          i {
            font-size: 24px;
            color: white;
          }
        }
        
        .balance-info {
          flex: 1;
          
          .balance-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 4px;
          }
          
          .balance-value {
            font-size: 24px;
            font-weight: 700;
            color: white;
          }
        }
      }
      
      .withdraw-form {
        .form-item {
          margin-bottom: 16px;
          
          .form-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
          }
        }
        
        .form-actions {
          display: flex;
          gap: 12px;
          
          .ant-btn {
            flex: 1;
            height: 40px;
            border-radius: 8px;
            font-weight: 500;
            
            i {
              margin-right: 6px;
            }
          }
        }
        
        .ant-radio-group {
          display: flex;
          gap: 16px;
          
          .ant-radio-wrapper {
            font-weight: 500;
          }
        }
      }
      
      .withdraw-tips {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 20px;
        border-left: 4px solid #667eea;
        
        .tips-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 16px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          
          i {
            color: #667eea;
          }
        }
        
        .tips-content {
          .tip-item {
            display: flex;
            margin-bottom: 8px;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .tip-label {
              font-size: 13px;
              color: #666;
              font-weight: 500;
              min-width: 80px;
              flex-shrink: 0;
            }
            
            .tip-text {
              font-size: 13px;
              color: #333;
              flex: 1;
            }
          }
        }
      }
    }
  }
  
  .records-section {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    
    .records-header {
      background: #f8f9fa;
      padding: 20px 24px;
      border-bottom: 1px solid #f0f0f0;
      
      .section-title {
        color: #333;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        
        i {
          color: #667eea;
        }
      }
    }
    
    .records-content {
      .withdraw-table {
        :deep(.ant-table-thead > tr > th) {
          background: #fafafa;
          font-weight: 600;
          color: #333;
          border-bottom: 2px solid #f0f0f0;
        }
        
        :deep(.ant-table-tbody > tr > td) {
          padding: 16px;
          border-bottom: 1px solid #f5f5f5;
        }
        
        :deep(.ant-table-tbody > tr:hover > td) {
          background: #f8f9fa;
        }
      }
      
      .amount.expense {
        color: #ff4d4f;
        font-weight: 600;
        font-size: 14px;
      }
      
      .desc {
        color: #666;
        font-size: 13px;
      }
    }
  }
  
  // 默认显示PC端，隐藏移动端
  .desktop-layout {
    display: block;
  }
  
  .mobile-layout {
    display: none;
  }
  
  .mobile-withdraw-cards {
    display: none;
  }
  
  .desktop-table {
    display: table;
  }
}

// 移动端适配
@media (max-width: 768px) {
  .withdraw-manager {
    * {
      box-sizing: border-box;
    }
    
    // 隐藏PC端，显示移动端
    .desktop-layout {
      display: none !important;
    }
    
    .mobile-layout {
      display: block;
    }
    
    // 移动端专用样式
    .mobile-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 10px 8px;
      text-align: center;
      border-radius: 6px 6px 0 0;
      
      .mobile-title {
        color: white;
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        
        i {
          margin-right: 4px;
          font-size: 14px;
        }
      }
    }
    
    .mobile-balance-card {
      background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
      margin: 8px;
      border-radius: 8px;
      padding: 10px;
      box-shadow: 0 2px 12px rgba(252, 182, 159, 0.3);
      
      .balance-header {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .balance-icon {
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          img {
            width: 26px;
            height: auto;
          }
        }
        
        .balance-text {
          flex: 1;
          
          .balance-label {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2px;
            font-weight: 500;
          }
          
          .balance-amount {
            font-size: 16px;
            font-weight: 700;
            color: white;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
    
    .mobile-form-card {
      background: white;
      margin: 8px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      
      .form-header {
        background: #f8f9fa;
        padding: 8px 12px;
        border-bottom: 1px solid #e8e8e8;
        
        h4 {
          margin: 0;
          font-size: 12px;
          font-weight: 600;
          color: #333;
        }
      }
      
      .form-body {
        padding: 12px;
        
        .input-group {
          margin-bottom: 12px;
          
          .input-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
          }
          
          :deep(.mobile-input) {
            width: 100%;
            height: 36px;
            border-radius: 8px;
            border: 1px solid #e8e8e8;
            font-size: 14px;
            
            &:hover {
              border-color: #667eea;
            }
            
            &:focus-within {
              border-color: #667eea;
              box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
            }
            
            .ant-input-number-input {
              height: 36px !important;
              font-size: 14px;
              font-weight: 500;
            }
          }
        }
        
        .mobile-buttons {
          display: flex;
          gap: 8px;
          
          .primary-btn {
            height: 34px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 6px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
            flex: 2;
            
            i {
              margin-right: 4px;
              font-size: 12px;
            }
            
            &:hover {
              transform: translateY(-1px);
              box-shadow: 0 3px 12px rgba(102, 126, 234, 0.4);
            }
          }
          
          .secondary-btn {
            height: 34px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 6px;
            border: 1px solid #e8e8e8;
            color: #666;
            flex: 1;
            
            i {
              margin-right: 3px;
              font-size: 11px;
            }
            
            &:hover {
              border-color: #667eea;
              color: #667eea;
            }
          }
        }
      }
    }
    
    .mobile-tips-card {
      background: white;
      margin: 8px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      
      .tips-header {
        background: #f8f9fa;
        padding: 8px 12px;
        border-bottom: 1px solid #e8e8e8;
        font-size: 12px;
        font-weight: 600;
        color: #333;
        
        i {
          color: #667eea;
          margin-right: 4px;
          font-size: 12px;
        }
      }
      
      .tips-list {
        padding: 10px;
        
        .tip-row {
          display: flex;
          align-items: flex-start;
          gap: 8px;
          padding: 6px 0;
          border-bottom: 1px solid #f5f5f5;
          
          &:last-child {
            border-bottom: none;
            padding-bottom: 0;
          }
          
          .tip-icon {
            font-size: 14px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f0f2ff;
            border-radius: 50%;
            margin-top: 1px;
            flex-shrink: 0;
          }
          
          .tip-content {
            flex: 1;
            
            .tip-title {
              font-size: 11px;
              font-weight: 600;
              color: #333;
              margin-bottom: 1px;
              line-height: 1.2;
            }
            
            .tip-desc {
              font-size: 10px;
              color: #666;
              line-height: 1.3;
            }
          }
        }
      }
    }
    
    // 提现记录区域移动端适配（保持现有卡片样式）
    .records-section {
      border-radius: 8px;
      
      .records-header {
        padding: 16px 20px;
        
        .section-title {
          font-size: 15px;
        }
      }
      
      .records-content {
        // 隐藏PC端表格
        .desktop-table {
          display: none !important;
        }
        
        // 显示移动端卡片
        .mobile-withdraw-cards {
          display: block;
          padding: 12px;
          
          .withdraw-card {
            background: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 8px;
            margin-bottom: 12px;
            overflow: hidden;
            
            &:last-child {
              margin-bottom: 0;
            }
            
            .withdraw-card-header {
              background: #f8f9fa;
              padding: 12px 16px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-bottom: 1px solid #e8e8e8;
              
              .withdraw-time {
                font-size: 12px;
                color: #666;
                font-weight: 500;
              }
              
              .withdraw-amount {
                .amount.expense {
                  color: #ff4d4f;
                  font-weight: 600;
                  font-size: 15px;
                }
              }
            }
            
            .withdraw-card-content {
              padding: 12px 16px;
              
              .status-row {
                display: flex;
                justify-content: space-between;
                margin-bottom: 12px;
                
                .status-item {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 4px;
                  flex: 1;
                  
                  .status-label {
                    font-size: 11px;
                    color: #999;
                    font-weight: 500;
                  }
                  
                  .ant-tag {
                    margin: 0;
                    font-size: 10px;
                    padding: 2px 6px;
                  }
                }
              }
              
              .description-row {
                padding-top: 8px;
                border-top: 1px solid #f5f5f5;
                
                .desc-label {
                  font-size: 11px;
                  color: #999;
                  font-weight: 500;
                  display: block;
                  margin-bottom: 4px;
                }
                
                .desc-text {
                  font-size: 12px;
                  color: #666;
                  line-height: 1.4;
                }
              }
            }
          }
          
          .mobile-empty {
            padding: 40px 20px;
            text-align: center;
            
            :deep(.ant-empty) {
              .ant-empty-description {
                font-size: 14px;
                color: #999;
              }
            }
          }
        }
      }
    }
  }
}

// 超小屏幕适配
@media (max-width: 480px) {
  .withdraw-manager {
    * {
      box-sizing: border-box;
    }
    
    .mobile-layout {
      .mobile-header {
        padding: 16px 12px;
        
        .mobile-title {
          font-size: 16px;
        }
      }
      
      .mobile-balance-card {
        margin: 12px;
        padding: 16px;
        
        .balance-header {
          gap: 12px;
          
          .balance-icon {
            width: 50px;
            height: 50px;
            
            img {
              width: 40px;
            }
          }
          
          .balance-text {
            .balance-amount {
              font-size: 24px;
            }
          }
        }
      }
      
      .mobile-form-card {
        margin: 12px;
        
        .form-body {
          padding: 16px;
          
          .input-group {
            margin-bottom: 16px;
            
            :deep(.mobile-input) {
              height: 46px;
              
              .ant-input-number-input {
                height: 46px !important;
                font-size: 15px;
              }
            }
          }
          
          .mobile-buttons {
            gap: 10px;
            
            .primary-btn,
            .secondary-btn {
              height: 46px;
              font-size: 15px;
            }
          }
          
          .mobile-radio-group {
            width: 100%;
            
            :deep(.ant-radio-wrapper) {
              font-size: 14px;
              margin-right: 16px;
            }
          }
          
          .mobile-upload {
            :deep(.ant-upload-select) {
              width: 80px !important;
              height: 80px !important;
              border-radius: 8px;
            }
            
            :deep(.ant-upload-list-picture-card-container) {
              width: 80px;
              height: 80px;
            }
          }
        }
      }
      
      .mobile-tips-card {
        margin: 12px;
        
        .tips-list {
          padding: 16px;
          
          .tip-row {
            padding: 12px 0;
            
            .tip-icon {
              width: 36px;
              height: 36px;
              font-size: 20px;
            }
            
            .tip-content {
              .tip-title {
                font-size: 14px;
              }
              
              .tip-desc {
                font-size: 13px;
              }
            }
          }
        }
      }
    }
    
    // 提现记录小屏适配
    .records-section {
      .records-content .mobile-withdraw-cards {
        padding: 8px;
        
        .withdraw-card {
          margin-bottom: 8px;
          
          .withdraw-card-content {
            .status-row .status-item {
              .ant-tag {
                font-size: 9px;
                padding: 1px 4px;
              }
            }
          }
        }
      }
    }
  }
}
</style> 